<template>
  <div class="box">
    <el-form
      :model="healthData"
      ref="form"
      label-width="80px"
      :inline="false"
      size="default"
      :props="{
        label: (data) => {
          console.log('data', data)
          // return data.meta.title
        }
      }"
    >
      <el-form-item label="设施名称">
        <el-input v-model="healthData.name" />
      </el-form-item>
      <el-form-item label="设施类型">
        <el-input v-model="healthData.type" />
      </el-form-item>
      <el-form-item label="企业位置" prop="address">
        <div class="flex flex-1">
          <el-input v-model="healthData.position" readonly placeholder="请点击按钮进行地图选址" />
          <el-button type="primary" size="default" @click="drawer = true">地图选址</el-button>
        </div>
      </el-form-item>

      <el-form-item label="服务半径(km)">
        <el-input v-model="healthData.radius" />
      </el-form-item>

      <el-form-item label="备注">
        <el-input v-model="healthData.remark" />
      </el-form-item>

      <el-form-item label="设备状态">
        <el-select v-model="healthData.status">
          <el-option value="正常">正常</el-option>
          <el-option value="维修">维修</el-option>
          <el-option value="损坏">损坏</el-option>
          <!-- <el-option v-for="item in options" :key="item.value" :value="item.value" /> -->
        </el-select>
      </el-form-item>
      <el-form-item el-form-item>
        <el-button type="success" @click="onSubmit" v-if="edata">确认修改</el-button>
        <el-button type="primary" @click="onSubmit" v-else>立即新增</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
    <el-drawer title="地图选址" v-model="drawer" direction="btt" size="60%">
      <GodMap v-model="healthData.position" />
    </el-drawer>
    <button @click="handleClick">查看经纬度</button>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
// import { ref } from 'vue'
import { healthDataType } from '../types/health'
import { parkHealthPost, parkHealthPut } from '@/api/ParkHealth'
import { ref, onMounted } from 'vue'
import GodMap from './god_map.vue'
import { useHealthData } from '@/store/health'
const emit = defineEmits()
const handleClick = () => {
  // console.log("经纬度",getLat.latlon)
  console.log('经纬度', healthData)
}
const getLat = useHealthData()
const healthData: healthDataType = reactive({
  name: '',
  position: '',
  radius: '',
  remark: '',
  status: '',
  type: '',
  lng: 0,
  lat: 0
})

// 下拉框选项
// const value = ref('')
// const options = [
//     { value: '正常' }, { value: '维修' }
// ]

// 新增
const onSubmit = () => {
  // parkHealthPost(healthData).then((res) => {
  //     emit('update:table-data', {
  //         ...healthData,
  //         objectId: res.data.objectId
  //     })
  // })

  if (props.edata) {
    // 修改

    healthData.lng = getLat.latlon!.lng
    healthData.lat = getLat.latlon!.lat
    let { objectId } = props.edata
    // console.log();
    parkHealthPut(objectId, healthData).then(() => {
      emit('update:table-data', {
        ...healthData,
        objectId
      })
    })
  } else {
    //新增
    healthData.lng = getLat.latlon!.lng
    healthData.lat = getLat.latlon!.lat

    parkHealthPost(healthData).then((res) => {
      emit('update:table-data', {
        ...healthData,
        objectId: res.data.objectId
      })
    })
  }
}

// const healthList = ref<Array<healthDataType>>([])
// const res = await parkHealthGet ()
// healthList.value = res.data.results

// 区分新增、编辑
// props数据具备单向性
type PropsType = {
  edata: healthDataType | null
}
const props = defineProps<PropsType>()
console.log('接收到了父级的props', props.edata)
onMounted(() => {
  if (props.edata) {
    //点击到了编辑按钮
    // console.log(props.edata, 99999);
    let { name, position, radius, remark, status, type, lat, lng } = props.edata
    // console.log(1212,name);

    healthData.name = name
    healthData.position = position
    healthData.radius = radius
    healthData.remark = remark
    healthData.status = status
    healthData.type = type
    healthData.lat = lat
    healthData.lng = lng

    // roleDate.name = name
    // roleDate.permission = permission
    // treeRef.value?.setCheckedKeys(permission) //设置tree组件默认勾选的元素

    // 修改
    // parkHealthPut(props.edata.objectId, roleDate)
  } else {
    //点击到了新增按钮
    healthData.name = ''
    healthData.position = ''
    healthData.radius = ''
    healthData.remark = ''
    healthData.status = ''
    healthData.type = ''
    healthData.lat = 0
    healthData.lng = 0
  }
})

// 地图选址弹窗
const drawer = ref<boolean>(false)
</script>

<style scoped>
.box :deep(.el-form-item__label) {
  box-sizing: content-box;
  width: 100px;
}
</style>
